<template>
    <el-dialog
            title="个人服务信息"
            :visible.sync="infoVisible"
            :close-on-click-modal="false"
            width="40%"
            v-dialogDrag>
        <div style="padding-left: 5%;padding-top:1%">
            <div>
                <el-table
                        :data="tableData"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="keyword"
                            label="字段"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="info"
                            label="信息"
                            width="280">
                    </el-table-column>
                </el-table>
            </div>

            <!--<p>字段信息：{{this.infoData.fieldInfo}}</p>-->
            <div style="margin-top: 15px">
            <p>服务类型：{{this.infoData.featureType}}</p>
            </div>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        data() {
            return {
                infoVisible: false,
                url: '',
                infoData: {},
                tableData:[]
            }
        },
        methods: {
            getPersonalServiceInfo() {
                let that = this;
                this.infoData = {};
                this.$axios.get(that.url).then(res => {
                    that.infoData = res.body;
                    let json=JSON.parse(res.body.tileserverInfo);
                    that.tableData=[];
                    let data=[];
                    for(let key in json)
                    {
                        let da={
                            keyword: key,
                            info: JSON.stringify(json[key][0]),
                        }
                        data.push(da);
                    }
                    that.tableData=data;
                    // console.log(jsonArray);
                    // let msonArray = JSONArray.fromObject(res.body.tileserverInfo);

                }).catch(function (error) {
                    console.log(error);
                    that.$message({
                        type: 'warning',
                        message: '模型数据集获取失败！'
                    })
                })
            }
        },
        created() {
            let that = this;
            this.$Bus.$on('personalServiceInfo', info => {
                that.url = info.url;
                that.infoVisible = info.visible;
                that.getPersonalServiceInfo();
            })
        }
    }
</script>

<style>
    .el-dialog__body {
        max-height: 600px;
        overflow: auto;
        padding: 10px 0;
    }
</style>